<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat SSE Demo</title>
</head>
<body>

<h1>Server-Sent Events with POST</h1>

<div id="messages"></div>

<script>
    // 获取 URL 中的查询参数
    function getQueryParam(param) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    function startSSE() {
        const url = 'http://localhost:8088/ai/flux'; // 后端服务器的完整 URL
        const message = getQueryParam('message') || ''; // 获取查询参数中的 'message' 值

        if (!message) {
            displayMessage('No message provided in the URL');
            return;
        }

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'text/event-stream' // 接受 SSE 类型的数据流
            },
            body: new URLSearchParams({
                'message': message
            })
        }).then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }

            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let buffer = ''; // 用于缓存不完整的数据
            let accumulatedData = ''; // 用于累计所有 data 内容

            return new ReadableStream({
                start(controller) {
                    function read() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                return;
                            }

                            buffer += decoder.decode(value, { stream: true });

                            // 检查是否有完整的事件块（每个事件块之间有两个换行符）
                            const eventBlocks = buffer.split("\n\n");

                            // 将最后一个块留在缓存里，可能是不完整的
                            buffer = eventBlocks.pop();

                            eventBlocks.forEach(eventBlock => {
                                const lines = eventBlock.split("\n");
                                let eventData = { data: '' };

                                lines.forEach(line => {
                                    if (line.startsWith("data:")) {
                                        // 累加所有的 data 行，不插入换行符
                                        eventData.data += line.substring(5).trim();
                                    }
                                });

                                // 仅当有数据时才显示
                                if (eventData.data) {
                                    accumulatedData += eventData.data; // 累加数据
                                    displayMessage(accumulatedData); // 显示完整数据
                                }
                            });

                            read();
                        });
                    }

                    read();
                }
            });
        }).catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
    }

    function displayMessage(message) {
        const messageDiv = document.getElementById('messages');
        messageDiv.innerHTML = ''; // 清空之前的内容
        const newMessage = document.createElement('p');
        newMessage.innerHTML = message; // 显示累计后的数据
        messageDiv.appendChild(newMessage);
    }

    // 开始 SSE 连接
    startSSE();
</script>

</body>
</html>
